<!-- 这是商品列表顶部的 一级菜单 组件 -->
<template>
    <div class="type">
        <router-link v-for="item in type_list" :to="'/typeList/'+item" :key="item">{{item}}</router-link>
    </div>
</template>
<script>
    import { getTypeOneList } from "@/tools/ajax"
    export default {
        name: "TypeOne",
        data(){
            return{
                // 一级分类标题
                type_list: []
            }
        },
        created() {
            console.log("初始化时请求一级分类标题") 
            this.getList();
        },
        methods: {
            getList() {
                getTypeOneList().then(data => {
                    // 只显示前9个分类
                    this.type_list = data.slice(0,9);
                });
            }
        },

    }
</script>
<style scoped>
    .type {
        width: 1200px;
        /* overflow-x: scroll; */
        margin: auto;
        background: white;
        padding: 10px;
        line-height: 30px;
        white-space: nowrap;
        display: flex;
        justify-content: space-between;
    }

    .type a {
        display: inline-block;
        padding: 0 40px;
        border-radius: 20px;
        transition: all .3s;
        color: #666;
        text-decoration: none;
    }
    /* 当router-link标签跳转时, 对应a标签会自动添加router-link-exact-active这个class值 */
    .type a:hover ,
    .router-link-exact-active{
        background: purple;
        color: #dedede !important;
    }
</style>